<template>
  <div class="mainContainer" style="display: flex; flex-direction: column">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="header">
      <div class="header-text"></div>
      <!--      <div class="header-setting"></div>-->
    </div>
    <div class="mainContainer-tabBar">
      <div class="mainContainer-tabBar-tabBarBox">
        <div class="mainContainer-tabBar-tabBarBox-overall2" @click="showuTab('overall')" v-if="activeTab === 'overall'">
        </div>
        <div class="mainContainer-tabBar-tabBarBox-three2" @click="showuTab('three')" v-if="activeTab === 'three'"></div>

        <div class="mainContainer-tabBar-tabBarBox-synthesis2" v-if="activeTab === 'synthesis'"></div>
        <div class="mainContainer-tabBar-tabBarBox-Unchecked">
          <div class="mainContainer-tabBar-tabBarBox-Unchecked-overall" v-if="activeTab !== 'overall'"
            @click="showTab('overall')">
          </div>
          <div class="mainContainer-tabBar-tabBarBox-Unchecked-three" v-if="activeTab !== 'three'"
            @click="showTab('three')"></div>
          <div class="mainContainer-tabBar-tabBarBox-Unchecked-synthesis" v-if="activeTab !== 'synthesis'"
            @click="showTab('synthesis')"></div>
          <div class="mainContainer-tabBar-tabBarBox-Unchecked-menu" @click="phoneIndex"></div>
        </div>

      </div>
      <div class="roam" v-show="showRoam" @click="menu('freewalk')" :class="{ 'roams': selectedTab === 'freewalk' }">
      </div>
      <div class="preinstall" v-show="showPreinstall" @click="menu('defaultwalk')"
        :class="{ 'preinstalls': selectedTab === 'defaultwalk' }"></div>
    </div>
    <div class="mainContainer-bottomBac"></div>

  </div>


  <router-view style="z-index: 99" v-if="isRouterAlive"></router-view>
</template>

<script setup>

import { ref, onMounted } from "vue";
import { sendToUeMsg } from '@/utils/UeMessageUtils'
import { useRouter } from 'vue-router'
import eventBus from '../utils/EventBus.js';
const selectedTab = ref();
const isRouterAlive = ref(true);
const router = useRouter()
const activeTab = ref('overall');
const showRoam = ref(false);
const showPreinstall = ref(false);


const menu = (tab) => {
  selectedTab.value = tab 
  sendToUeMsg({
    type: tab,
  })
  eventBus.emit('menuChanges', tab); // 发送事件到其他组件
}
const showuTab = (tab) => {
  if (tab === 'three') {
    showRoam.value = !showRoam.value;
    showPreinstall.value = !showPreinstall.value;
  }
  sendToUeMsg({
    type: tab,
  })
  eventBus.emit('tabChanges', tab); // 发送事件到其他组件
}

const phoneIndex = () =>{
    router.push('/phone');
}
const showTab = (tab) => {
  activeTab.value = tab;
  // 根据选项卡不同进行路由跳转
  if (tab === 'overall') {
    showRoam.value = false;
    showPreinstall.value = false;
    console.log(tab, 'overall');
    // sendToUeMsg({
    //   type: tab,
    // })
    router.push('/');
  } else if (tab === 'three') {
    showRoam.value = !showRoam.value;
    showPreinstall.value = !showPreinstall.value;
    router.push('/margin');
  } else if (tab === 'synthesis') {
    showRoam.value = false;
    showPreinstall.value = false;
    router.push('/synthesis');
  }
  sendToUeMsg({
    type: tab,
  })
  eventBus.emit('tabChange', tab); // 发送事件到其他组件
};
</script>

<style lang="scss" scoped>
.selectedTab {
  background-image: url("../assets/images/home/roam1.png");
  background-size: 100% 100%;
}

.mainContainer {
  position: relative;

  &-tabBar {
    width: 420px;
    height: 216px;
    position: fixed;
    pointer-events: all;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    &-tabBarBox {
      width: 352px;
      height: 176px !important;
      display: inline-block;
      position: relative;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;

      &-overall2 {
        width: 142px;
        height: 148px;
        background-image: url("../assets/images/home/01.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 11;
        //transform: translateX(-50%);
      }

      &-three2 {
        width: 180px;
        height: 117px;
        background-image: url("../assets/images/home/02.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 49.5%;
        transform: translateX(-49.5%);
      }

      &-synthesis2 {
        width: 144px;
        height: 147px;
        background-image: url("../assets/images/home/03.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        right: 0;
      }

      &-Unchecked {
        width: 322px;
        height: 160px;
        //position: absolute;
        //bottom: 0;
        //left: 50%;
        //transform: translateX(-50%);
        position: relative;
        margin: 16px;
        transition: all .2s;


        &-overall {
          width: 122px;
          height: 135px;
          background-image: url("../assets/images/home/1.png");
          background-size: 100% 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          transition: all .2s;

        }

        &-three {
          width: 165px;
          height: 100px;
          background-image: url("../assets/images/home/2.png");
          background-size: 100% auto;
          position: absolute;
          top: 0;
          left: 49.5%;
          transform: translateX(-50%);
          transition: all .2s;

        }

        &-synthesis {
          width: 122px;
          height: 135px;
          background-image: url("../assets/images/home/3.png");
          background-size: 100% auto;
          position: absolute;
          right: 0;
          bottom: 0;
          transition: all .2s;

        }

        &-menu {
          width: 99px;
          height: 49.5px;
          background-image: url("../assets/images/home/4.png");
          background-size: 100%;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
    }
  }

  .roam {
    width: 92px !important;
    height: 76px !important;
    background-image: url("../assets/images/home/roam1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 55px;
    z-index: 100;
  }

  .roams {

    background-image: url("../assets/images/home/roam2.png");
    background-size: 100% 100%;

  }

  .preinstall {
    width: 73px;
    height: 91.5px;
    background-image: url("../assets/images/home/preinstall1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 60px;
    right: 0;
    z-index: 100;
  }

  .preinstalls {

    background-image: url("../assets/images/home/preinstall2.png");
    background-size: 100% 100%;

  }

  &-bottomBac {
    position: fixed;
    bottom: 0;
    width: 1920px;
    height: 32px;
    background-image: url("../assets/images/home/bgc_decorate.png");
    background-size: 100% 100%;
    z-index: -1;
  }
}

.bg-left {
  position: absolute;
  z-index: 0;
  width: 539px;
  height: 100vh;
  background: linear-gradient(90deg,
      rgba(7, 27, 33, 0.66) 44%,
      rgba(7, 27, 33, 0) 100%);
  opacity: 1;
}

.bg-right {
  position: absolute;
  right: 0;
  z-index: 0;
  width: 539px;
  height: 100vh;
  background: linear-gradient(270deg,
      rgba(7, 27, 33, 0.66) 43%,
      rgba(7, 27, 33, 0) 100%);
  opacity: 1;
}

.header {
  z-index: 99;
  display: flex;
  // justify-content: space-between; /* 让子元素在水平方向上平均分布 */
  align-items: center;
  /* 让子元素在垂直方向上居中对齐 */
  width: 100%;
  position: absolute;
  height: 90px;
  background-image: url("../assets/images/home/bgc_title.png");
  background-size: 100% 100%;

  &-text {
    width: 466px;
    height: 43px;
    background-image: url("../assets/images/home/bgc_titile.svg");
    background-size: 100% 100%;
    margin: 0 38%;
  }

  &-setting {
    width: 28px;
    height: 28px;
    background-image: url("../assets/images/home/icon_she.png");
    background-size: 100% 100%;
    //   align-self: flex-end; /* 让该元素在垂直方向上靠底部对齐 */
    margin-right: 18px;
    cursor: pointer;
  }
}
</style>
